<template>
  <div class="categoryItem">
    <van-tree-select :items="items" height="100%" :main-active-index.sync="active">
      <template #content>
        <ul class="section">
          <li v-for="(info, index) in items2" :key="index">
            <img src="../img/seizeSeat.png">
            <span>{{info.category_name}}</span>
          </li>
        </ul>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
  import {
    Notify
  } from 'vant'
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {
        items: [],
        active: 0
      }
    },
    methods: {
      ...mapMutations(['SET_CATEGORY_INFO']),
      onChange(index) {
        Notify({
          type: 'primary',
          message: index
        })
      },
      async getCategoryItem() {
        this.$api.homeData.categoryItem().then(({
          data
        }) => {
          this.SET_CATEGORY_INFO(data)
        })
      },
      getCategoryItemLeft() {
        const item = this.category.filter(value => {
          return value.category_level === '1'
        })
        item.forEach((value) => {
          this.items.push({
            text: value.category_name
          })
        })
      }
      // getCategoryItemRight() {
      //   const item2 = this.category.filter(value => {
      //     return (value.category_level === '3' && value.parent_id === this.active + 17)
      //   })
      //   this.items2 = item2
      //   console.log(this.active)
      // }
    },
    mounted() {
      this.getCategoryItem()
      this.getCategoryItemLeft()
      // this.getCategoryItemRight()
    },
    computed: {
      ...mapState(['category']),
      items2() {
        return this.category.filter(value => {
          return (value.category_level === '3' && value.parent_id === this.active + 17)
        })
      }
    }
  }
</script>

<style scoped>
  .categoryItem {
    position: relative;
    /* height: 100%; */
  }

  .van-sidebar {
    text-align: center;
    position: fixed;
    margin-top: 46px;
    height: 100%;
    background-color: #F2F2F2;
  }

  .van-sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: transparent;
  }

  .van-tree-select__content {
    position: absolute;
    left: 80px;
    padding: 65px 15px;
    width: 300px;
  }

  .van-tree-select__content ul {
    width: 300px;
  }

  .van-tree-select__content li img {
    width: 70px;
    height: 70px;
  }

  .van-tree-select__content li {
    width: 90px;
    text-align: center;
    float: left;
    display: flex;
    flex-flow: column;
    align-items: center;
    padding-right: 5px;
    padding-bottom: 5px;
  }

  .van-tree-select__content li span {
    color: #333;
    height: 25px;
    margin-top: 8px;
  }
</style>
